<!DOCTYPE html>
<html>
<head>
    <title>系统通知</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/message.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="../js/common.js"></script>
    <script>
        $(function () {
            // var senderId = JSON.parse(sessionStorage.getItem("user")).id;
            // //先获取到未读取信息数量
            // $.get("/userChats/" + senderId + "/unreads", function (data) {
            //     if (data) {
            //         $(".unreadMessage").html(data)
            //     }
            //     //获取当前用户未读的动态数量
            //     $.get("/users/"+senderId+"/unreadDynamicNums",function (data) {
            //         if (data) {
            //             $(".unreadDynamic").html(data)
            //         }
            //     });
            //
            // });

            //获得当前用户的未读的系统通知
            var userId = JSON.parse(sessionStorage.getItem("user")).id;
            $.get(baseUrl + "/users/selectNoticeList/" + userId, function (data) {
                //获得PageInfo<Notice>
                console.log(data);
                var json = {list: data.list};
                $(".comment").renderValues(json, {
                    getId: function (item, value) {
                        //console.log(value);
                        $(item).attr("data-id", value)
                    }
                })
                //把未读的通知的背景颜色变红色
                var noticeArr = []
                $.get(baseUrl + "/users/selectNoticeState/" + userId, function (data) {
                    noticeArr = $(data)[0].noticeArr;
                    $.each($(".notice"), function (index, ele) {
                        for (var i = 0; i <= noticeArr.length; i++) {
                            if ($(ele).data("id") == noticeArr[i]) {
                                $(ele).css("background-color", "#efa2a9")
                            }
                        }
                    })
                    //把通知状态更改为已读
                    $.get(baseUrl + "/users/updateNoticeState/" + userId)
                })
            })


        });
    </script>

</head>
<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:window.history.go(-1);">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
            <span>系统通知</span>
        </div>
        <div class="col"></div>
    </div>
</div>
<div class="comment">
    <div render-loop="list">
        <div class="container" id="containerBtn">
            <div class="row notice" style="background-color: #D1E5BB" render-key="list.id" render-fun="getId">
                <div class="col-2 comment-head">
                    <a>
                        <img class="rounded-circle userInfBtn" src="/timg.jpg"
                             width="50px">
                    </a>
                </div>
                <div class="col">
                    <a style="font-size: 10px;">小骡骡</a>
                    <span class="comment-date" render-html="list.releaseTime"></span>
                    <div class="comment-content">
                        <b style="font-size: 15px;" render-html="list.title"></b>
                        <p render-html="list.content"></p>
                    </div>
                </div>
            </div>
            <hr/>
        </div>

    </div>
</div>
</body>

</html>